if (document.body.offsetWidth > '668') {
    /*总体的轮播*/
    var swiper = new Swiper('.swiper-body.swiper-container', {
        direction: 'vertical',
        followFinger: false,
        speed: 800,
        mousewheel: true,
        pagination: {
            el: '.navDv,.swiper-pagination',
            clickable: true,
        },
        on: {
            init: function (swiper) {
                slide = this.slides.eq(0);
                slide.addClass('ani-slide');
            },
            transitionStart: function () {
                for (i = 0; i < this.slides.length; i++) {
                    slide = this.slides.eq(i);
                    slide.removeClass('ani-slide');
                }
            },
            transitionEnd: function () {
                slide = this.slides.eq(this.activeIndex);
                slide.addClass('ani-slide');

            },
        }
    });
}
var swiperNum = document.querySelector(".navDv")
var swiperLi = swiperNum.querySelectorAll(".swiper-pagination-bullet")
var arr11 = ["首页", "关于我", "技能掌握", "我的经历", "我的作品", "联系我"]
for (var i = 0; i < swiperLi.length; i++) {
    console.log(swiperLi[i])
    var a = document.createElement("a")
    swiperLi[i].appendChild(a)
    a.innerHTML = arr11[i]
}


var body = document.querySelector("body")
var navInner = document.querySelector(".navInner")
var navBtn = document.querySelector(".navBtn")
var navBox = document.querySelector(".navBox")
navInner.onclick = function () {
    if (navBtn.className == "navBtn") {
        navBtn.classList.add("open")
        navBox.style = "width:33vw;right:0;border-bottom-width: 100vh;"
        body.classList.add("bod")
        if (document.body.offsetWidth <= '668') {
            navBox.style = "width:90vw;right:0;border-bottom-width: 100vh;"
        }
    } else {
        navBtn.classList.remove("open")
        navBox.style = "width:0;right:-180px;"
        body.classList.remove("bod")
    zhengjianzhao.css("display","none")

    }
}


// 点击证件照的事件

// var bbb = $(".body")
var zhengjianzhao = $(".zhengjianzhao")
var tx = $(".tx")
tx.on("click",function(){

    body.classList.add("bod")
    zhengjianzhao.css("display","block")
    navBtn.classList.add("open")
})

// 


var swiperSlide = document.querySelectorAll(".swiper-slide.Zinn")
var navBoxSp = document.querySelectorAll(".navBox span")
for (let i = 0; i < navBoxSp.length; i++) {
    navBoxSp[i].onclick = function () {
        // console.log(i)
        if (document.documentElement.scrollTop) {
            document.documentElement.scrollTop = swiperSlide[i].offsetTop;
        } else {
            document.body.scrollTop = swiperSlide[i].offsetTop;
        }
        for (var j = 0; j < navBoxSp.length; j++) {
            navBoxSp[j].classList.remove("active")
        }
        navBtn.classList.remove("open")
        navBox.style = "width:0;right:-180px;"
        body.classList.remove("bod")
        navBoxSp[i].classList.add("active")
    }
}



let arr = [0, 1, 2, 3, 4];
let btn = 0;
var btns = document.querySelectorAll(".btns button")
var complete = document.querySelectorAll(".complete")
for (let i = 0; i < btns.length; i++) {
    btns[i].index = i
    btns[i].onclick = function () {
        for (let j = 0; j < btns.length; j++) {
            btns[j].classList.remove("Yes")
            complete[j].classList.remove("Yes")
        }
        arr.splice(btn, 1, this.index)
        if (btn >= 5) {
            btn = 0
        } else {
            btn++;
        }
        arr.length = 5;
        for (let k = 0; k < arr.length; k++) {
            btns[arr[k]].classList.add("Yes")
            complete[arr[k]].classList.add("Yes")
        }

    }
}


var yuan = document.querySelectorAll(".Z-date i")
var yuanLi1 = document.querySelectorAll(".Z-date li")
var yuanLi2 = document.querySelectorAll(".Z-work li")
function ou(a, b) {
    for (let i = 0; i < a.length; i++) {
        a[i].onmouseover = function () {
            b[i].classList.add("active")
        }
        a[i].onmouseout = function () {
            b[i].classList.remove("active")
        }
    }
}
ou(yuanLi1, yuan)
ou(yuanLi2, yuan)




var coud = document.querySelector(".coud")
var coudLi = document.querySelectorAll(".coud li")
var coudI = document.querySelector(".inner .box i")
for (let i = 0; i < coudLi.length; i++) {
    coudLi[i].onclick = function () {
        coudI.innerText = this.innerText
        if (document.body.offsetWidth <= '668') {
            for (var j = 0; j < coudLi.length; j++) {
                coudLi[j].classList.remove("active")
            }
            this.classList.add("active")
        }
    }
}
var ZDateZ = document.querySelector(".Z-date")
var ZDate = document.querySelectorAll(".Z-date li")
var ZWork = document.querySelectorAll(".Z-work li")
function demo(a) {
    setInterval(function () {
        switch (coudI.innerText) {
            case "2017":
                // console.log(2017);
                a[0].className = 'active'
                a[1].className = ''
                a[2].className = ''
                break;

            case "2018":
                a[0].className = ''
                a[1].className = 'active'
                a[2].className = ''
                break;

            case "2019":
                a[0].className = ''
                a[1].className = ''
                a[2].className = 'active'
                break;

            case "2020":
                a[0].className = 'active'
                a[1].className = 'active'
                a[2].className = 'active'
                break;

            default:
                break;
        }

    }, 1000)
}
demo(ZDate)
demo(ZWork)

/**/



function das(a, b, c) {
    var carousel = document.querySelector(b);
    var carouselImg = carousel.querySelectorAll('img');
    var carouselTxt = document.querySelectorAll(".carousel a .txtIcon")
    //文字
    var pagerArr = ["本网站", "品优购", "学成在线", "本网站", "电商后台管理系统", "阿里百秀", "携程网", "电商后台管理系统"];
    for (let i = 0; i < carouselTxt.length; i++) {
        carouselTxt[i].innerText = pagerArr[i]
    }
    var pager = document.querySelector(c);
    var border = document.querySelector(a);
    //生成小图标
    for (var i = 0; i < carouselImg.length; i++) {
        var a = document.createElement("a")
        a.href = "javascript:;"
        a.className = "thumb" + (i + 1)
        var img = document.createElement("img")
        img.src = carouselImg[i].src;
        img.width = "50";
        a.appendChild(img)
        pager.appendChild(a)
    }
    carousel.appendChild(carousel.firstElementChild.cloneNode(true));
    var carouselBtn = pager.querySelectorAll('a');
    carousel.style.height = carouselImg.length * carouselImg[0].offsetHeight + 'px';
    var index = 0;
    var xh = null;
    function autoPlay() {
        xh = setInterval(function () {
            if (index == -3) {
                //给上一个原点背景改为白色
                carouselBtn[0].classList.remove("selected");
            } else {
                //给上一个原点背景改为白色
                carouselBtn[-index].classList.remove("selected");
            }

            index--;

            if (index == -4) {
                index = -1;
                carousel.style.top = '0px';
            }
            run(index * carouselImg[0].offsetHeight);
            if (index == -3) {
                carouselBtn[0].classList.add("selected");
            } else {
                //给下一个原点背景改为红色
                carouselBtn[-index].classList.add("selected");
            }
        }, 3000);
    }
    autoPlay();
    var running = null;
    function run(num) {
        clearInterval(running);
        running = setInterval(function () {
            //先算目标值与当前值得差距  /10
            var height = (num - carousel.offsetTop) / 10;
            height = height > 0 ? Math.ceil(height) : Math.floor(height);
            //给ul的top赋值  =  当前值 + 本次移动的距离
            carousel.style.top = carousel.offsetTop + height + 'px';
        }, 1000 / 40);
    }
    border.onmouseover = function () {
        clearInterval(xh);
    }
    border.onmouseout = function () {
        autoPlay();
    }
    //遍历小圆点  给每一个添加一个点击
    for (var i = 0; i < carouselBtn.length; i++) {
        //给每一个小圆点添加一个属性  属性值就是下标  这也是 原点与图片之间的关联所在
        carouselBtn[i].abc = i;
        carouselBtn[0].classList.add("selected")
        carouselBtn[i].onclick = function () {
            console.log(this.abc);
            //遍历清楚每一个圆点的背景
            for (var j = 0; j < carouselBtn.length; j++) {
                carouselBtn[j].classList.remove("selected");
            }
            this.classList.add("selected");
            run(-this.abc * carouselImg[0].offsetHeight);
            //让index=当前li的下标  那么下一次执行就会播放下一张   而不是上一张了
            index = -this.abc;
        }
    }
}
das(".left", ".left .carousel", ".left .pager")
das(".right", ".right .carousel", ".right .pager")

var iconIcon = document.querySelectorAll(".lian-lo .icon")
var iconImg = document.querySelectorAll(".lian-lo .icon span");
for (let i = 0; i < iconIcon.length; i++) {
    iconIcon[i].index = i
    iconIcon[i].onmouseover = function () {
        iconImg[i].style.zIndex = '1'
    }
    iconIcon[i].onmouseout = function () {
        iconImg[i].style.zIndex = '-1'
    }
}

//屏幕小于668px时的处理
if (document.body.offsetWidth <= '668') {
    var swiperBody = document.querySelector(".swiper-body")
    swiperBody.classList.remove("swiper-no-swiping")
    for (let i = 0; i < ZDate.length; i++) {
        ZDate[i].style.height = ZWork[i].offsetHeight + 'px'
    }
    coud.style.paddingLeft = ZDateZ.offsetWidth - 8 + "px"

    var swiper = new Swiper('.swiper-inner.swiper-container', {
        effect: 'cube',
        grabCursor: true,
        cubeEffect: {
            shadow: true,
            slideShadows: true,
            shadowOffset: 20,
            shadowScale: 0.94,
        },
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
    var head = document.querySelector(".head");
    var headTitle = document.querySelector(".head .head-title")
    window.onscroll = function () {
        scroll()
    }
    function scroll() {
        var he = document.documentElement.scrollTop + document.body.scrollTop;
        if (he > '180') {
            head.style.background = 'rgba(0,0,0,0.8)'
            headTitle.style.opacity = '1'
            setTimeout(function () {
                headTitle.style.display = 'block'
            }, 400)
        } else {
            head.style.background = 'transparent'
            headTitle.style.opacity = '0'
            setTimeout(function () {
                headTitle.style.display = 'none'
            }, 400)
        }
    }
    scroll()

}

// ZDate
// ZWork